<!-- <template>
    <h1>组件上使用v-for</h1>
    子组件

    <MyComponent v-for="(item, index) in items" :item="item" :index="index" :key="item.id" />
</template>  -->
 

<!--   
<script setup>
import { ref, reactive, computed } from "vue";
const items = reactive(
    [
        {
            name: '张三',
            age: '18',
            id: 0,
        },
        {
            name: '王五',
            age: '19',
            id: 1,
        },
    ]
)

</script> -->



<script setup>
import { defineProps, defineEmits, ref } from 'vue';

const { title } = defineProps(['title']);
const emit = defineEmits();

let isEditing = ref(false);
let editedTitle = ref(title);

const startEditing = () => {
  isEditing.value = true;
};

const finishEditing = () => {
  isEditing.value = false;
  emit('edit', editedTitle.value);
};

const remove = () => {
  emit('remove');
};
</script>

<template>
  <li>
    <span v-if="!isEditing">{{ title }}</span>
    <input v-else v-model="editedTitle" @blur="finishEditing" @keyup.enter="finishEditing" />

    <button @click="remove">删除</button>
    <button @click="startEditing" v-if="!isEditing">编辑</button>
    <button @click="finishEditing" v-if="isEditing">完成编辑</button>
  </li>
</template>

